<!--
 * @Date         : 2024-03-01 20:29:20
 * @LastEditTime : 2024-04-18 21:51:18
 * @description  : 
-->
<script setup>
import { getExamDesc, getExamInfo } from "@/api";
import { onMounted, ref } from "vue";
import Header from "../components/Header.vue";
const data = ref("");
const isSite = ref(false);
const isAgreement = ref(false);

const getData = () => {
  getExamDesc().then((res) => {
    console.log(res);
    let { site_rule, exam_explain } = res.data;
    data.value = {
      site_rule: richText(site_rule),
      exam_explain: richText(exam_explain),
    };
  });
};
const onClick = () => {
  isSite.value = false;
};
const onClick1 = () => {
  isSite.value = true;
};
const richText = (value) => {
  // 将换行符转换为<br>标签
  return value.replace(/\n/g, "<br>");
};

const onAgreeChange = (value) => {
  console.log(value);
  isAgreement.value = value;
};
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="Notice">
    <Header title="中药处方审核模块考试" :isAgreement="isAgreement" />
    <div class="main">
      <div class="title" v-if="!isSite">中药处方审核模块考试考生须知</div>
      <div class="title" v-else>中药处方审核模块考试考生操作说明</div>
      <div class="notice-txt">
        <div v-if="isSite" v-html="data.exam_explain"></div>
        <div v-else v-html="data.site_rule"></div>
      </div>
      <div>
        <div class="myLook" style="--el-checkbox-checked-text-color: #ff0000">
          <el-checkbox @change="onAgreeChange" v-model="isAgreement">
            <div class="text">我已知晓考试须知</div>
          </el-checkbox>
        </div>
      </div>
      <div class="bottom">
        <el-button
          @click="onClick"
          type="primary"
          color="#652e1b"
          :plain="isSite"
        >
          考生须知
        </el-button>
        <el-button
          @click="onClick1"
          color="#652e1b"
          type="primary"
          :plain="!isSite"
        >
          操作说明
        </el-button>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Notice {
  min-width: 100vw;
  background: #855c4c;
  box-sizing: border-box;
  height: 100vh;
  overflow: auto;
  .main {
    overflow-y: auto;
    margin: 0 10px 10px 10px;
    border-radius: 0 0 10px 10px;
    background: #f6eee8;
    box-sizing: border-box;
    height: 88vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    letter-spacing: 4px;
    line-height: 2;
    .title {
      font-size: 24px;
      color: #652e1b;
      text-align: center;
      padding: 20px;
      font-weight: 600;
    }
    .notice-txt {
      flex: 1;
      box-sizing: border-box;
      padding: 0 20vw;
      line-height: 1.5;
      font-size: 20px;
      font-weight: 600;
      overflow-y: auto;
      .text {
        color: #666;
        font-weight: 500;
      }
    }
    .bottom {
      display: flex;
      justify-content: center;
    }
  }
  ::v-deep .myLook {
    margin: 0 10px 10px 10px;
    display: flex;
    justify-content: center;
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background: #ff0000;
      color: #f00;
      border-color: #ff0000;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #ff0000;
    }
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: #ff0000;
      border-color: #ff0000;
    }
    .text {
      font-size: 16px;
      font-weight: 600;
      margin-left: 10px;
    }
  }
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

/* 设置滚动条滑块的背景色和圆角 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

/* 设置滚动条滑块在悬停状态下的背景色和圆角 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
  border-radius: 5px;
}

/* 设置滚动条轨道的背景色和圆角 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 5px;
}

/* 设置滚动条轨道在悬停状态下的背景色和圆角 */
::-webkit-scrollbar-track:hover {
  background-color: #ccc;
  border-radius: 5px;
}
</style>
